<template>
  <div class="margin">
    <div class="header">
      <Button type="info" @click="addStu">新增</Button>
      <Button type="warning" @click="deleteStu" :disabled="!id">批量删除</Button>
      <Button type="success">统计</Button>
      <div class="search">
        <Checkbox v-model="iseq">精确匹配</Checkbox>
        <Select v-model="search" style="width:200px">
          <Option v-for="item in searchArr" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Input
          @on-search="searchFun"
          v-model="searchStr"
          search
          enter-button="查找"
          class="searchIpt"
          @keyup.enter="searchFun"
        />
      </div>
    </div>
    <Table
      :loading="loading"
      @on-selection-change="getIds"
      stripe
      ref="selection"
      :columns="thData"
      :data="stuData"
      class="table"
    ></Table>
    <div class="margin">
      <Page
        @on-change="handelPage"
        @on-page-size-change="handelPageSize"
        :current="curP"
        :total="totalP"
        :page-size="pageSize"
        :page-size-opts="pageSizeArr"
        show-elevator
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
import axios from "../axios";
import { stuUrl } from "../baseUrl/index";
export default {
  data() {
    return {
      searchStr: "",
      search: "name",
      searchArr: [
        { value: "name", label: "姓名" },
        { value: "gender", label: "性别" },
        { value: "age", label: "年龄" },
        { value: "hobbies", label: "爱好" },
        { value: "edu", label: "学历" },
        { value: "desc", label: "简介" }
      ],
      iseq: false,
      curP: 1,
      totalP: 0,
      pageSize: 5,
      pageSizeArr: [2, 3, 5, 8],
      loading: true,
      id: "",
      thData: [
        {
          type: "selection",
          width: 50,
          align: "center"
        },
        {
          title: "姓名",
          width: 100,
          key: "name"
        },
        {
          title: "性别",
          width: 70,
          key: "gender",
          align: "center"
        },
        {
          title: "年龄",
          width: 70,
          key: "age",
          align: "center"
        },
        {
          title: "爱好",
          width: 200,
          key: "hobbies"
        },
        {
          title: "学历",
          width: 130,
          key: "edu",
          align: "center"
        },
        {
          title: "简介",
          key: "desc"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.Tchange(params.row);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.Tremove(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      stuData: []
    };
  },
  methods: {
    Tchange(data) {
      this.$router.push({ name: "AddStu", params: data });
    },
    Tremove(data) {
      if (!data) {
        return;
      }
      if (confirm("确定要删除吗")) {
        this.loading = true;
        axios({
          url: `${stuUrl}/${data}`,
          method: "delete",
          success: data => {
            this.getData();
          }
        });
      }
    },
    deleteStu() {
      this.Tremove(this.id);
    },
    getIds(row) {
      let arr = [];
      for (let i = 0; i < row.length; i++) {
        arr.push(row[i].id);
      }
      this.id = arr.join(",");
    },
    getData() {
      this.loading = true;
      axios({
        url: stuUrl,
        method: "get",
        params: {
          transform: 1,
          order: "id,desc",
          page: `${this.curP},${this.pageSize}`,
          filter: `${this.search},${this.iseq ? "eq" : "cs"},${this.searchStr}`
        },
        success: data => {
          this.stuData = data.data.stu;
          this.totalP = data.data._results;
          this.loading = false;
        }
      });
    },
    addStu() {
      this.$router.push("/home/add");
    },
    handelPage(val) {
      this.curP = val;
      this.getData();
    },
    handelPageSize(val) {
      this.pageSize = val;
      this.getData();
    },
    searchFun() {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped>
.margin {
  margin: 10px 20px 0;
}
.table {
  margin-top: 20px;
}
.header {
  position: relative;
}
.search {
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
}
.searchIpt {
  width: 50%;
  position: absolute;
  right: 0;
}
</style>
